<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景</title>


        <style>
            .box1 {
                width: 500px;
                height: 500px;
                /*
                    background-color 设置背景颜色
                */

                /*background-color: #bfa;*/

                /*
                    background-image: 设置背景图片
                            - 可以同时设置背景图片和背景颜色, 这样背景颜色就会成为背景图片
                            - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满
                            - 如果背景的图片大于元素,将会一个部分背景图片无法完全显示。
                            - 如果背景图片和元素一样大,则会直接正常显示
                 */
                background-image: url(./img/1.png);


                /*
                    background-repeat  用来设置背景的重复方式
                        可选值:
                            repeat 默认值,背景会沿着x轴,y轴双放心重复
                            repeat-x    沿着x轴方向重复
                            repeat-y    沿着y轴方向重复
                            no-repeat   背景图片不重复
                 */
                background-repeat: no-repeat;

                /*
                    background-position: 用来设置背景图片的位置
                        设置方式:
                            通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
                                使用方位词时必须要同时指定两个值,如果只选一个则第二个默认就是center

                            通过偏移量来指定背景图片的位置:
                                水平方向的偏移量
                                垂直方向变量
                 */
                /*background-position: top left;*/
                /*水平和垂直的偏移量设置*/
                background-position: 100px 100px;

            }

        </style>

    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>